<template>
  <div class="demo16">

    <div v-if="tianqi">
      <h1>
        {{tianqi.city}}/ {{tianqi.cityEn}}
      </h1>
      <p>{{tianqi.update_time}}</p>
      <div class="tianqi-wrap">
        <CellGroup class="item" v-for="(day,inidex) in tianqi.data" :key="day.date">

          <Cell title="天" :extra="day.day"/>
          <Cell title="日期" :extra="day.date"/>
          <Cell title="最高气温" :extra="day.tem1"/>
          <Cell title="最低气温" :extra="day.tem2"/>
          <Cell title="天气" :extra="day.wea"/>
          <Cell title="风向" :extra="day.win.join(',')"/>


          <Cell v-if="day.air" title="空气质量" :extra="day.air.toString()"/>
          <Cell v-if="day.air_level" title="空气等级" :extra="day.air_level"/>
          <Cell v-if="day.day_tips" title="空气建议" :extra="day.air_tips"/>
          <div v-for="hour in day.hours">
            {{hour.day}}
            {{hour.wea}}
          </div>


        </CellGroup>

      </div>
    </div>
    {{tianqi}}
  </div>


</template>

<script>
  import axios from 'axios'

  export default {
    name: 'demo16',
    components: {},
    props: {},
    data() {
      return {
        tianqi: null
      };
    },
    mounted() {
      axios.get('https://www.tianqiapi.com/api/?version=v1&cityid=101120201&city=%E9%9D%92%E5%B2%9B&ip=27.193.13.255&callback=%20').then(res => {

        return eval(res.data)
      }).then(res => {
        console.log(res)
        this.tianqi = res;
      })
    },
    methods: {},
    computed: {}
  };
</script>

<style scoped lang="less">
  .demo16 {
    .tianqi-wrap {


      .item {

        border: 1px solid red;
        border-radius: 5px;
        margin: 3px;
      }
    }
  }
</style>
<style lang="less">
  .demo16 {
  }
</style>
